<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>弹出框插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!-- 
	1.基本案例(位置默认右上方)
		1)	data-toggle="popover"
		2)	title="标题"
		3)	data-content="内容"
		4)	$('触发事件的对象').popover()
	
	2.属性(参照工具提示插件.html或补充4.html)
		1)	data-placement="left/auto/auto bottom"等 			//警告框的位置
		2)	data-animation="true/false" 						//动画效果
		3)	data-html="true/false" 								//是否解析html语句
		4)	data-container="容器名称"（JS方法） 				//指定容器，使不受较小容器的限制
		5)	data-selector="对象名称" （JS方法） 				//绑定对象，实现部分对象
		6)	data-original-title="次标题" 						//优先级低于title
		7)	data-triggle="hover focus" 							//触发popover的方式。默认click
		8)	data-delay="毫秒数" 								//延迟显示和隐藏。JS方法：{show:200,hide:100}
		9)	data-template 										//更改弹出框的模版

		10)	data-content="标题"									//弹出框的内容标题
		11)	data-viewport="容器名称" （JS方法）					//设置弹出框的顶边相对于容器的位置
		12) $('button').popover('show')							//或(默认)hide或toggle
		13)	$('button').popover('destroy')						//销毁
		14) $('button').on('show.bs.tab',函数) 			//弹出框出现之前触发。还有shown、hide、hidden





 -->
	
	<button class="btn btn-danger btn-lg"
		data-toggle="popover"
		title="Bootstrap"
		data-content="<b>Bootstrap</b>，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。"
		data-placement="bottom"
		data-html="true"
		data-animation="false"
		data-trigger="hover focus"
	>移入弹出/隐藏弹出框</button>

	<div id="view" style="width:240px; height:100px; border:2px solid #000;margin-top: 100px;">
		<div id="test" class="btn btn-warning"
			data-toggle="popover"
			title="Bootstrap"
			data-content="<b>Bootstrap</b>，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。"
			data-trigger="hover focus"
		>TEST</div>
	</div>

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>
		$('button').popover();
		$('#test').popover();

		//容器
		/*$('button').popover({
			container : '#content'
		});*/

		//视角1
		/*$('#test').popover({
			viewport : '#view'
		});*/

		//视角2(问题：弹出框的指向箭头会分离)
		/*$('#test').popover({
			viewport : {
				selector : '#view',
				padding : 30
			}
		});*/

		//显示/隐藏
		/*$(document).on('click', function () {
			$('#test').popover('toggle');
		})*/

		//销毁
		/*$(document).on('click', function () {
			$('#test').popover('destroy');
		})*/

		//事件类型(回调函数)
		$('#test').on('hide.bs.popover', function () {
			alert('弹出框出现之前触发')
		})
	
	</script>
</body>
</html>